<template>
  <div class="dynamicAnchor_container">
    <div class="dynamicAnchor_main" @scroll="handleScroll">
      <div
        v-for="(item, index) in list"
        :id="'dynamicAnchor_item' + index"
        :key="index + 'item'"
        class="dynamicAnchor_item"
        :style="{ height: 130 * (index + 1) + 'px' }"
      >
        {{ item.title }}
      </div>
    </div>
    <!-- 锚点 -->
    <div class="anchor_main">
      <div
        v-for="(item, index) in list"
        :key="index + 'anchor'"
        :class="index === currentIndex ? 'activeTab' : ''"
        @click="handleTab(index)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DynamicAnchor',
  data() {
    return {
      list: [
        {
          title: '用户管理',
        },
        {
          title: '配置管理',
        },
        {
          title: '角色管理',
        },
        {
          title: '定时任务补偿',
        },
      ],
      currentIndex: 0,
      trigger: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      const dynamicAnchor_items = document.querySelectorAll(
        '.dynamicAnchor_item'
      )
      dynamicAnchor_items.forEach(
        (f) => (f.style.backgroundColor = this.getColor())
      )
    })
  },
  methods: {
    getColor() {
      return (
        'rgb(' +
        this.randomNum(0, 255) +
        ',' +
        this.randomNum(0, 155) +
        ',' +
        this.randomNum(0, 255) +
        ')'
      )
    },
    randomNum(a, b) {
      var min = Math.min(a, b)
      var max = Math.max(a, b)
      return Math.floor(Math.random() * (max - min + 1)) + min
    },
    // 点击tab
    handleTab(index) {
      this.currentIndex = index
      document.querySelector('#dynamicAnchor_item' + index).scrollIntoView({
        behavior: 'smooth', // 平滑过渡
        block: 'start', // 上边框与视窗顶部平齐。默认值
      })
    },
    // 监听滚动事件
    handleScroll(e) {
      console.log(e)
      const scrollItems = document.querySelectorAll('.dynamicAnchor_item')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop
        if (judge) {
          this.currentIndex = i
          break
        }
      }
      this.$forceUpdate()
    },
  },
}
</script>
<style lang="less" scoped>
.dynamicAnchor_container {
  overflow: hidden;
  height: 100vh;
  .dynamicAnchor_main {
    height: 100%;
    overflow: auto;
  }
  .dynamicAnchor_item {
    width: 100%;
  }
  .anchor_main {
    position: fixed;
    top: 20%;
    right: 5%;
    background-color: #fff;
    z-index: 9;
    padding: 20px;
    div {
      height: 40px;
      color: #000;
      line-height: 40px;
      padding: 0px 20px;
      border-left: 3px solid #e4e7ed;
      font-weight: bold;
      cursor: pointer;
      &:hover {
        color: #f34d37;
      }
    }
    .activeTab {
      color: #f34d37;
      border-color: #f34d37;
    }
  }
}
</style>
